
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>证书查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="./bootstrap.min.css"> -->
    <script src="./jquery-3.4.1.min.js"></script>
    <!-- <script src="./bootstrap.min.js"></script> -->
    <script type="text/javascript">
        $(function() {
            $("#valid").click(
            function() {
                //alert($("#certCode").val());
                var data = {
                    status: 1,
                    user: {
                        school: '郑州师范学院',
                        xh: '174103051023',
                        name: '王云',
                        score: 86
                    }
                }
                if ($("#certCode").val() == "UN3wRix4$1579579311") {
                    //$("#certImg").attr("src", data.url)
                    $("#school").html(data.user.school);
                    $("#xh").html(data.user.xh);
                    $("#name").html(data.user.name);
                    var score= data.user.score;
                    $("#score").html(score>=90?"优秀":score>=80?"良好":score>=70?"合格":"无");
                    $("#info").show();
                    $('.bck').show();
                    $("#info2").hide();
                } else {
                    $("#school").html("");
                    $("#xh").html("");
                    $("#name").html("");
                    $('#info').hide();
                    $('.bck').hide();
                    $("#info2").show();
                    // location.href = "http://guojia.koudaiqc.com/cert";
                    // alert("请输入验证码！");
                }
            });
            if ("UN3wRix4$1579579311") {
                $("#valid").click();
            }
        });
    </script>
    <style>
       
        h2{
            display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
        }
        .bck{
            position: absolute;
            background-color: #eeeeee77;
            width: 100%;
            height: 320px;
            left: 0;
            top: 0;
            display: none;
        }
        .jumbotron{
            position: relative;
            /* z-index: 1; */
        }
    </style>
    </head>
    <body>
        <div class="bck"></div>
        <div class="jumbotron">
            <div class="container">
                <h2>说明：在输入框中输入验证码，点击验证按钮验证证书是否有效！</h2>
                <div class="input-group">
                    <input id="certCode" type="text" class="form-control" value="UN3wRix4$1579579311" placeholder="请输入证书验证码..."> <span class="input-group-btn">
                        <button id="valid" class="btn btn-default" type="button">验证</button>
                    </span>
                </div>
                <!-- /input-group -->
                <div id="info" style="display: none;">
                    <div class="row">
                        <p class="form-control-static">学校：<span id="school"></span></p>
                        <p class="form-control-static">学号：<span id="xh"></span></p>
                        <p class="form-control-static">姓名：<span id="name"></span></p>
                        <p class="form-control-static">等级：<span id="score"></span></p>
                    </div>
                </div>
                <div id="info2" style="display: none;">
                    <div class="row">
                        <p class="form-control-static">无效的证书验证码！</p>
                    </div>
                </div>
            </div>
            
        </div>
    
    </body></html>